<template>
  <div :style="commpStyle" class="macInput">
    <div :class="dynamicSetMacBoxStyle" style="height: 32px !important;" >
      <el-input v-model="mac1"
                maxlength='2' ref='mac1'
                :class="dynamicSetMacInputStyle"
                @keyup.native="keyupEvent(1,$event)"
                @input="(val) => handleInpMac(val,'mac1')"
                :size="inputSize"
                :disabled="disabled"></el-input>
      <span class="dot">{{split}}</span>
      <el-input v-model="mac2"
                maxlength='2' ref='mac2'
                :class="dynamicSetMacInputStyle"
                @keyup.native="keyupEvent(2,$event)"
                @input="(val) => handleInpMac(val,'mac2')"
                :size="inputSize"
                :disabled="disabled"></el-input>
      <span class="dot">{{split}}</span>
      <el-input v-model="mac3"
                maxlength='2' ref='mac3'
                :class="dynamicSetMacInputStyle"
                @keyup.native="keyupEvent(3,$event)"
                @input="(val) => handleInpMac(val,'mac3')"
                :size="inputSize"
                :disabled="disabled"></el-input>
      <span class="dot">{{split}}</span>
      <el-input v-model="mac4"
                maxlength='2' ref='mac4'
                :class="dynamicSetMacInputStyle"
                @keyup.native="keyupEvent(4,$event)"
                @input="(val) => handleInpMac(val,'mac4')"
                :size="inputSize"
                :disabled="disabled"></el-input>
      <span class="dot">{{split}}</span>
      <el-input v-model="mac5"
                maxlength='2' ref='mac5'
                :class="dynamicSetMacInputStyle"
                @keyup.native="keyupEvent(5,$event)"
                @input="(val) => handleInpMac(val,'mac5')"
                :size="inputSize"
                :disabled="disabled"></el-input>
      <span class="dot">{{split}}</span>
      <el-input v-model="mac6"
                maxlength='2' ref='mac6'
                :class="dynamicSetMacInputStyle"
                @keyup.native="keyupEvent(6,$event)"
                @input="(val) => handleInpMac(val,'mac6')"
                :size="inputSize"
                :disabled="disabled"></el-input>
    </div>
  </div>
</template>

<script>

import BaseComp from './baseComp'
export default {
  name: "mac",
  model:{
    prop:"value",
    event:"macChange",
  },
  extends: BaseComp,
  props:{
    split:{
      type:String,
      default:":"
    },
    disabled:{
      type:Boolean,
      default: false
    },
    //inputSize  根element是size一样  有三种选择  mini small medium
    inputSize:{
      type:String,
      default:""
    },
    //boxWidth 三种选择  miniWidth  smallWidth  mediumWidth  不满足样式请自定义样   如下style
    boxWidth:{
      type:String,
      default:""
    },
    //当前默认传递过来的值
    value:String
  },
  data() {
    return {
      mac1: '',
      mac2: '',
      mac3: '',
      mac4: '',
      mac5: '',
      mac6: '',
      //默认样式
      dynamicSetMacBoxStyle:'macBoxSmall',
      dynamicSetMacInputStyle:'macinputSmall',
      dynamicSetCircleCloseStyle:'closeSmall'
    };
  },
  created() {
    if(this.boxWidth === 'miniWidth'){
      this.dynamicSetMacBoxStyle = 'macBoxMini';
      this.dynamicSetMacInputStyle = 'macinputMini';
      this.dynamicSetCircleCloseStyle = 'closeMini';
    }
    if(this.boxWidth === 'mediumWidth'){
      this.dynamicSetMacBoxStyle = 'macBoxMedium';
      this.dynamicSetMacInputStyle = 'macinputMedium';
      this.dynamicSetCircleCloseStyle = 'closeMedium';
    }
    //自定义样式在这里配置
    if(this.boxWidth === 'scanWidth'){
      this.dynamicSetMacBoxStyle = 'macBoxScan';
      this.dynamicSetMacInputStyle = 'macinputScan';
      this.dynamicSetCircleCloseStyle = 'closeScan';
    }

  },
  watch:{
    value:{
      handler(val){
        if(val != '' && val !== null && val !== undefined){
          let macList = val.split(this.split);
          this.mac1 = macList[0];
          this.mac2 = macList[1];
          this.mac3 = macList[2];
          this.mac4 = macList[3];
          this.mac5 = macList[4];
          this.mac6 = macList[5];
        }else {
          this.mac1 = '';
          this.mac2 = '';
          this.mac3 = '';
          this.mac4 = '';
          this.mac5 = '';
          this.mac6 = '';
        }
      },
      immediate: true,  //刷新加载 立马触发一次handler
      deep: true  // 可以深度检测到 obj 对象的属性值的变化
    },
    disabled:{
      handler(newVal,oldVal){
        if(newVal){
          this.changeBackground();
        }
      },
      deep:true,
      immediate:true
    }

  },
  computed: {

  },
  methods: {
    //监听键盘
      keyupEvent (index,e) {
      //按下tab键跳到下一个输入框（同理可做出其他按键的跳转输入框）
      if (e.keyCode === 190) {
        //判断当前位置值为空，则不做任何处理。
        if (!this['mac' + index]){
          return;
        }
        if (index == 1) {
          this.$refs.mac2.focus();
        } else if (index == 2) {
          this.$refs.mac3.focus();
        } else if (index ==3){
          this.$refs.mac4.focus();
        }else if (index ==4){
          this.$refs.mac5.focus();
        }else if (index ==5){
          this.$refs.mac6.focus();
        }
      }
      //删除键
      if (e.keyCode == 8){
        if (index > 1 && !this['mac' + index]) {
          this.$refs['mac' + (index - 1)].focus();
        }
        this.submitMac()
      }
      //右移动键
      if ( e.keyCode == 39){
        if (index < 6) {
          this.$refs['mac' + (index + 1)].focus();
        }
      }
      //左移动键
      if(e.keyCode == 37){
        if (index > 1) {
          this.$refs['mac' + (index - 1)].focus();
        }
      }
      // 回车键
      if(e.keyCode === 13){
        let mac = this.submitMac()
        if(this.mac1 && this.mac2 && this.mac3 && this.mac4 && this.mac5 && this.mac6) {
          this.$emit('checkMac', mac)
        }
      }
    },
    // 到失去输入框焦点时
    submitMac () {
      //失去焦点判断值是否输入完整，并向父组件传整个mac值
      let echo = [];
      if (this.mac1) {
        echo.push(this.mac1);
      }
      if (this.mac2) {
        echo.push(this.mac2);
      }
      if (this.mac3) {
        echo.push(this.mac3);
      }
      if (this.mac4) {
        echo.push(this.mac4);
      }
      if (this.mac5) {
        echo.push(this.mac5);
      }
      if (this.mac6) {
        echo.push(this.mac6);
      }
      this.$emit('macChange', echo.join(this.split));
      //这是防止elementui的form表单验证必填项时显示文字的也就是required,用不到可不写
      this.$parent.$emit("el.form.change");
      return echo.join(this.split);
    },
    //输入的值
    handleInpMac(val, key) {
      //检查并判断当前输入值是否符合mac地址要求
      // 定义正则表达式
      var regex = /^[A-Za-z0-9]{1,2}$/;
      if (!regex.test(val)){
        this[key] = ""
      }else{
        // 当长度为2位时
        let rule = /^[A-Za-z0-9]{2}$/;
        this[key] = val;
        //判断输入的mac值长度为2位时,跳到下一个输入框中
        if(rule.test(val)) {
          switch(key) {
            case "mac1":
              this.$refs.mac2.focus();
              break;
            case "mac2":
              this.$refs.mac3.focus();
              break;
            case "mac3":
              this.$refs.mac4.focus();
              break;
            case "mac4":
              this.$refs.mac5.focus();
              break;
            case "mac5":
              this.$refs.mac6.focus();
              break;
            default:
              break;
          }
        }
        this.submitMac();
      }
    },
    //禁用时改变input背景
    changeBackground(){

    },
  }
}
</script>

<style scoped lang='less'>
.dot {
  display: inline-block;
}
/***********   medium样式 为默认样式   **********/
.macBoxMedium{
  border: 1px solid #DCDFE6;
  display: inline-block;
  //border-radius: 5px;
  line-height: 0px;
  position: relative;
  top: 0;
  left: 0;
}
.macBoxMedium:hover{
  border: 1px solid #C0C4CC;
}
.macBoxMedium:active{
  border: 1px solid #409EFF;
}
.macinputMedium{
  display: inline-block;
  width: 15%;
  /deep/ .el-input__inner {
    border: 0;
  }
  font-size: 16px;
}
.closeMedium{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 12px;
}
&:hover {
  .closeMedium{
    display: inline-block;
  }
}
/***********   small样式    **********/
.macBoxSmall{
  border: 1px solid #DCDFE6;
  display: inline-block;
  border-radius: 4px;
  line-height: 0px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.macBoxSmall:hover{
  border: 1px solid #C0C4CC;
}
.macBoxSmall:active{
  border: 1px solid #409EFF;
}
.macinputSmall{
  display: inline-block;
  width: 15%;
  /deep/ .el-input__inner {
    padding: 0 10px;
    text-align: center;
    border: 0;
  }
  font-size: 14px;
}
.closeSmall{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 13px;
}
&:hover {
  .closeSmall{
    display: inline-block;
  }
}
/***********   mini样式    **********/
.macBoxMini{
  border: 1px solid #DCDFE6;
  display: inline-block;
  border-radius: 2px;
  line-height: 0px;
  position: relative;
  top: 0;
  left: 0;
}
.macBoxMini:hover{
  border: 1px solid #C0C4CC;
}
.macBoxMini:active{
  border: 1px solid #409EFF;
}
.macinputMini{
  display: inline-block;
  width: 44px;
  /deep/ .el-input__inner {
    padding:2px;
    text-align: center;
    border: 0;
  }
  font-size: 14px;

}
.closeMini{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 12px;
}
&:hover {
  .closeMini{
    display: inline-block;
  }
}
/***********   IP扫描样式    **********/
.macBoxScan{
  border: 1px solid #37393a;
  display: inline-block;
  border-radius: 6px;
  line-height: 0px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.macinputScan{
  display: inline-block;
  width: 15%;
  /deep/ .el-input__inner {
    padding:2px;
    //text-align: center;
    border: 0;
  }
  font-size: 14px;

}
.closeScan{
  display: none;
  font-size: 8px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 8px;
}
//页面显示时就显示
&:hover {
  .closeScan{
    display: inline-block;
  }
}
</style>
